<template>
  <div class="forget-container">
    <!-- 动态背景 -->
    <dynamic-background type="forget" :overlay-opacity="0.8" />
    
    <transition name="fade-in" appear>
      <div class="forget-box">
        <!-- 装饰图案 -->
        <div class="decoration-triangles">
          <div class="triangle triangle-1"></div>
          <div class="triangle triangle-2"></div>
          <div class="triangle triangle-3"></div>
        </div>
        <div class="decoration-waves">
          <div class="wave-group wave-group-1"></div>
          <div class="wave-group wave-group-2"></div>
        </div>
        
        <div class="forget-left">
          <div class="logo-header">
            <img src="../images/logo-圆角.png" alt="small-logo" class="small-logo" />
            <span class="logo-text">云栈智慧管家</span>
          </div>
          <div class="animation-container">
            <forget-animation />
          </div>
          <p class="slogan-text">重置密码，安全回归</p>
        </div>
        <div class="forget-right">
          <div class="welcome-text">
            <h2>🔑 找回密码</h2>
            <p>请输入您的注册邮箱和新密码，我们将发送验证码到您的邮箱</p>
          </div>
          <el-form :model="form" :rules="rules" ref="form" class="forget-form">
            <el-form-item prop="email">
              <el-input 
                v-model="form.email" 
                placeholder="请输入电子邮箱"
                prefix-icon="el-icon-message">
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input 
                v-model="form.password" 
                type="password" 
                placeholder="请输入新密码"
                prefix-icon="el-icon-lock">
              </el-input>
            </el-form-item>
            <el-form-item prop="verifyCode">
              <div class="verify-code-container">
                <el-input 
                  v-model="form.verifyCode" 
                  placeholder="请输入验证码" 
                  class="verify-code-input"
                  prefix-icon="el-icon-key">
                </el-input>
                <el-button 
                  class="verify-code-btn" 
                  :disabled="cooldown > 0"
                  @click="sendVerifyCode">
                  {{ cooldown > 0 ? `${cooldown}秒后重试` : '发送' }}
                </el-button>
              </div>
            </el-form-item>
            <el-button type="primary" class="forget-button" @click="handleSubmit">重置密码</el-button>
            <div class="return-container">
              <el-button type="text" class="return-btn" @click="goToLogin">返回登录</el-button>
            </div>
          </el-form>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import DynamicBackground from '@/components/DynamicBackground.vue'
import ForgetAnimation from '@/components/ForgetAnimation.vue'
import { sendVerifyCode, resetPassword } from '@/api/auth'

export default {
  name: 'ForgetView',
  components: {
    DynamicBackground,
    ForgetAnimation
  },
  data() {
    return {
      form: {
        email: '',
        password: '',
        verifyCode: ''
      },
      cooldown: 0,
      timer: null,
      rules: {
        email: [
          { required: true, message: '请输入电子邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        verifyCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 6, max: 6, message: '验证码长度为6位', trigger: 'blur' }
        ]
      }
    };
  },
  beforeDestroy() {
    // 清除计时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    sendVerifyCode() {
      this.$refs.form.validateField('email', async (errorMsg) => {
        if (errorMsg) {
          return;
        }
        
        try {
          // 调用发送验证码的API
          await sendVerifyCode(this.form.email);
          
          this.$message.success('验证码已发送至您的邮箱，请注意查收');
          
          // 设置冷却时间为60秒
          this.cooldown = 60;
          this.timer = setInterval(() => {
            this.cooldown--;
            if (this.cooldown <= 0) {
              clearInterval(this.timer);
            }
          }, 1000);
        } catch (error) {
          console.error('发送验证码失败:', error);
          // 全局拦截器会处理错误消息
        }
      });
    },
    handleSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) {
          return false;
        }
        
        try {
          // 调用重置密码的API
          const res = await resetPassword({
            email: this.form.email,
            password: this.form.password,
            verifyCode: this.form.verifyCode
          });
          
          if (res.code === 200) {
            this.$message.success('密码重置成功，请使用新密码登录');
            
            // 跳转到登录页面
            setTimeout(() => {
              this.goToLogin();
            }, 1500);
          }
          // 全局拦截器会处理错误响应
        } catch (error) {
          console.error('重置密码失败:', error);
          // 全局拦截器会处理错误消息
        }
      });
    },
    goToLogin() {
      // 添加页面离开动画
      document.querySelector('.forget-box').classList.add('slide-out-right');
      
      // 延迟导航以等待动画完成
      setTimeout(() => {
        this.$router.push('/user/login');
      }, 500);
    }
  }
};
</script>

<style scoped>
.forget-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* 添加进入动画 */
.fade-in-enter-active {
  transition: all 0.8s ease;
}

.fade-in-enter {
  opacity: 0;
  transform: translateY(20px);
}

/* 添加页面切换动画 */
.slide-out-right {
  animation: slideOutRight 0.5s forwards;
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(50px);
    opacity: 0;
  }
}

.forget-box {
  width: 900px;
  height: 500px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  display: flex;
  overflow: hidden;
  position: relative;
  z-index: 1;
  /* 添加玻璃效果 */
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 装饰图案样式 */
.decoration-triangles {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.triangle {
  position: absolute;
  opacity: 0.1;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.triangle-1 {
  width: 180px;
  height: 180px;
  background: linear-gradient(135deg, #7E57C2, #9575CD);
  top: -50px;
  right: 30px;
  transform: rotate(180deg);
}

.triangle-2 {
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, #9575CD, #B39DDB);
  bottom: 50px;
  right: 250px;
  transform: rotate(30deg);
}

.triangle-3 {
  width: 150px;
  height: 150px;
  background: linear-gradient(135deg, #B39DDB, #D1C4E9);
  top: 150px;
  right: 150px;
  transform: rotate(60deg);
  opacity: 0.07;
}

.decoration-waves {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.wave-group {
  position: absolute;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(126, 87, 194, 0.1) 0px,
    rgba(126, 87, 194, 0.1) 2px,
    transparent 2px,
    transparent 9px
  );
  opacity: 0.15;
}

.wave-group-1 {
  width: 200px;
  height: 200px;
  top: 20px;
  right: 40px;
  transform: rotate(15deg);
}

.wave-group-2 {
  width: 150px;
  height: 150px;
  bottom: 30px;
  right: 180px;
  transform: rotate(-10deg);
  background-size: 12px 12px;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(126, 87, 194, 0.1) 0px,
    rgba(126, 87, 194, 0.1) 2px,
    transparent 2px,
    transparent 9px
  );
}

/* 左侧面板样式 */
.forget-left {
  width: 40%;
  background: linear-gradient(135deg, #304156 0%, #263445 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
  position: relative;
  box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
  
  .animation-container {
    width: 100%;
    height: 240px;
    margin: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: visible;
  }
}

.logo-header {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.small-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.logo-text {
  color: #fff;
  font-size: 16px;
  white-space: nowrap;
}

.slogan-text {
  color: #fff;
  font-size: 16px;
  margin-top: 20px;
  text-align: center;
}

.forget-right {
  width: 60%;
  padding: 40px 60px;
}

.welcome-text {
  margin-bottom: 30px;
  text-align: left;
}

.welcome-text h2 {
  font-size: 28px;
  color: #364360;
  margin-bottom: 10px;
}

.welcome-text p {
  color: #666;
  font-size: 14px;
}

.forget-form {
  width: 100%;
}

.el-form-item {
  margin-bottom: 30px;
}

.el-input /deep/ .el-input__inner {
  height: 50px;
  border-radius: 25px;
  padding-left: 45px;
  border-color: #dcdfe6;
}

.el-input /deep/ .el-input__inner:hover {
  border-color: #364360;
}

.el-input /deep/ .el-input__inner:focus {
  border-color: #364360;
}

.el-input /deep/ .el-input__prefix {
  left: 20px;
}

.forget-button {
  width: 100%;
  height: 50px;
  border-radius: 25px;
  background: #364360;
  border-color: #364360;
  font-size: 16px;
  margin-bottom: 15px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.forget-button:hover,
.forget-button:focus {
  background: #2d384f;
  border-color: #2d384f;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(54, 67, 96, 0.3);
}

.forget-button:active {
  background: #21293b;
  border-color: #21293b;
  color: #fff;
}

.verify-code-container {
  display: flex;
  align-items: center;
}

.verify-code-input {
  flex: 1;
  margin-right: 10px;
}

.verify-code-btn {
  height: 50px;
  border-radius: 25px;
  min-width: 100px;
  background: #364360;
  border-color: #364360;
  color: #fff;
  transition: all 0.3s ease;
}

.verify-code-btn:hover,
.verify-code-btn:focus {
  background: #2d384f;
  border-color: #2d384f;
  color: #fff;
}

.verify-code-btn:active {
  background: #21293b;
  border-color: #21293b;
  color: #fff;
}

.verify-code-btn[disabled] {
  background: #8599ba;
  border-color: #8599ba;
  color: #fff;
}

.return-container {
  text-align: center;
  margin-top: 2px;
}

.return-btn {
  color: #364360;
  font-size: 14px;
  padding: 5px 15px;
  height: 20px;
  line-height: 24px;
}

.return-btn:hover,
.return-btn:focus {
  color: #2d384f;
  text-decoration: none;
  background: transparent;
}

.return-btn:active {
  color: #21293b;
  text-decoration: none;
  background: transparent;
}
</style> 